<template>
  <div class="box">{{ 1 + 1 }} {{ a }} {{ b }} {{ c }} {{ d }} {{ e }}</div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref } from 'vue'
let c = ref(9)
export default {
  setup() {
    return {
      a: 1,
      b: 2,
      e: c
    }
  },
  data() {
    return {
      c: 3,
      d: 4
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      // this.e++
      c.value++
    }
  },
  mounted() {
    console.log(`helloworld`)
    // 10 20
    // -7 20
    // 12 + 9 = 21
    // 5 alc 2 = 10
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
